<template>
   <div id="PieChart" :style="styleBase">

   </div>
</template>
 
<script>
import {colormap,colormapHig,lowColor} from 'api/js/config.js'
import linechartdata from 'api/js/linechartdata.js'
export default {
   name: 'PieChart',
   props: {
    base: {
        type: Object,
    },
    chartSelectNames: {
        type: Array
    },
   },
   computed: {
       styleBase() {
           return {
               width: this.base.width+"px",
               height: this.base.height+"px",
           }
       },
   },
   watch: {
       chartSelectNames(museumNames) {
           this.linechart(museumNames)
       },
   },
   mounted() {
       /* 或者这里写图表代码 */
       this.colorScale = d3.scaleOrdinal(d3.schemeCategory10)
        this.linechart([])

   },
   components: {

   },
   methods: {
    judgeCo(container,value) {
        let flag = false
        for(let i = 0; i < container.length; ++i) {
            if(container[i] === value) {
                    flag = true
                    break
            } 
        }
        return flag
    },
    judgeIs(container,params) {
        //若该圆是选中的博物馆 返回true 否则返回false
        if(container.length!=0) {
            //findIndex 失效？？？？？？
            let flag = false
            for(let i = 0; i < container.length; ++i) {
                if(container[i] === params.value[3]) {
                    flag = true
                    break
                } 
            }
            return flag
        } else {
            return true
        }
    },
    
    linechart(container){
            let that = this
            var myChart = echarts.init(document.getElementById('PieChart'));
           
 
            var original_data = linechartdata;
            var data = [];
            let temp = [];
            if (container.length === 0){
                this.xzoom['start'] = 5
                this.xzoom['end'] = 80
                this.yzoom['start'] = 5
                this.yzoom['end'] = 80
                data = Object.values(original_data);
                data = data.map(function (item) {
                    return [item[3], item[2], item[1],item[0],item[4]];
                });
                //console.log(data)
            }
            else{
                this.xzoom['start'] = 0
                this.xzoom['end'] = 100
                this.yzoom['start'] = 0
                this.yzoom['end'] = 100
                temp = Object.values(original_data);
                temp = temp.map(function (item) {
                    return [item[3], item[2], item[1],item[0],item[4]];
                });
                let indexTemp = []
                for(let i = 0; i < temp.length; ++i) {
                    if(that.judgeCo(container,temp[i][3])==true) {
                        indexTemp.push(i)
                    } else {
                        data.push(temp[i])
                    }
                }
                //console.log(indexTemp)
                for(let i = 0; i < indexTemp.length;++i) {
                    data.push(temp[indexTemp[i]])
                }
                //console.log(data)
            }

            that.option = {
                legend: {
                    data: ['museum'],
                    left: 'right'
                },
                tooltip: {
                    position: 'top',
                    formatter: function (data) {
                        that.$emit("chartSelectMethod",data.value[3])
                        return data.value[3] + '，有藏品' + data.value[2]+'件，'+'占地面积'+ data.value[1]+'平方米';
                    },
                    textStyle:{
                        fontSize:14,

                    }
                },
                dataZoom: [
                {
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: that.xzoom['start'],
                    end: that.xzoom.end
                },
                {
                    type: 'slider',
                    show: true,
                    yAxisIndex: [0],
                    left: '93%',
                    start: that.yzoom['start'],
                    end: that.yzoom['end']
                },
                {
                    type: 'inside',
                    xAxisIndex: [0],
                    start: 1,
                    end: 35
                },
                {
                    type: 'inside',
                    yAxisIndex: [0],
                    start: 29,
                    end: 36
                }
            ],
                grid: {
                    left: 20,
                    bottom: 40,
                    right: 50,
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    
                    boundaryGap: false,
                    splitLine: {
                        show: true
                    },
                    axisLine: {
                        show: false
                    },
                    name:'游玩\n时长',
                    nameTextStyle: {
                        padding: [0, 0, -35, 3]    // 四个数字分别为上右下左与原位置距离
                    }
                },
                yAxis: {
                    type: 'log',
                    
                    axisLine: {
                        show: false
                    },
                    name:'博物馆数量'
                    
                },
                series: [{
                    name: 'Punch Card',
                    type: 'scatter',
                    symbolSize: function (val) {
                        return Math.log10(val[2])*8 ;
                    },
                    data: data,
                    animationDelay: function (idx) {
                        return idx * 5;
                    },
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                if(that.judgeIs(container,params) == true) {
                                    //let color = colormap(params.value[4])
                                    if(container.length==0)
                                        return colormap(params.value[4])
                                    else 
                                        return colormapHig(params.value[4])
                                    //return that.colorScale(params.value[4])
                                } else {
                                    return lowColor
                                }
                            },
                            //shadowBlur: 10,
                            //shadowColor: 'rgba(120, 36, 50, 0.5)',
                            shadowOffsetY: function(params) {
                                if(that.judgeIs(container,params) == true) {
                                    return 5
                                } else {
                                    return 1
                                }
                            },

                        }
                }
                
                }]
            };
            that.option && myChart.setOption(that.option);

            myChart.on('mouseout', function (params) {
            /*这里写鼠标移出事件*/
                that.$emit("chartSelectMethod","")
             });

        }
   },
   data () {
       return {
           xzoom: {
               'start': 10,
               'end':35,
           },
            yzoom: {
                'start':10,
                'end':40
            },
            option: {},
            colorScale: undefined, 
       }
   }
}
</script>
 
<style>
#PieChart {
    background-color: #f8e9d9;
}
</style>